<template>
  <div class="search_container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 8px">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <!-- 搜索内容和导出区域 -->
      <el-row>
        <el-col :span="4">
          <el-button type="primary" @click="showAddDialog()" size="large">发布新公告</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        height="420"
        :data="tableData"
        border
        style="width: 100%"
        stripe
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column prop="noticeId" label="ID"></el-table-column>
        <el-table-column prop="noticeTitle" label="标题"></el-table-column>
        <el-table-column prop="noticeContent" label="公告"></el-table-column>
        <el-table-column prop="createTime" label="发布日期"></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- 修改按钮 -->
            <el-button type="primary" @click="showEditDialog(row.noticeId)">
              <el-icon><EditPen /></el-icon>
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" @click="removeUserById(row.noticeId)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页查询区域 -->
      <el-pagination
        @size-change="handleSizeChange()"
        @current-change="handleCurrentChange()"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="queryInfo.pageSize"
        layout="total,  prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 修改公告的对话框 -->
      <el-dialog title="修改公告" v-model="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="editForm" ref="editFormRef" :rules="editFormRules" label-width="100px">
          <el-form-item label="公告标题" prop="noticeTitle">
            <el-input v-model="editForm.noticeTitle" size="large"></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="noticeContent">
            <el-input type="textarea" v-model="editForm.noticeContent" size="large"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editNoticeById">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加公告的对话框 -->
      <el-dialog v-model="addDialogVisible" title="添加公告" width="50%" @close="addDialogClosed">
        <el-form :model="addForm" ref="addFormRef" :rules="addFormRules" label-width="100px">
          <el-form-item label="公告标题" prop="noticeTitle">
            <el-input v-model="addForm.noticeTitle"></el-input>
          </el-form-item>
          <el-form-item label="公告内容" prop="noticeContent">
            <el-input type="textarea" v-model="addForm.noticeContent"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addNotice()">添加公告</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getNotice, addNotices, removeNotice, alterNotice, getOneNotice } from "../../api/api";
//表格数据
const tableData = ref([]);
//修改公告框显示
const editDialogVisible = ref(false);
//修改公告
const editForm = reactive({
  noticeId: "",
  noticeTitle: "",
  noticeContent: "",
});
//修改公告规则
const editFormRules = reactive({
  noticeTitle: [
    { required: true, message: "请输入公告标题", trigger: "blur" },
    {
      min: 6,
      max: 30,
      message: "长度在6到30个字符",
      trigger: "blur",
    },
  ],
  noticeContent: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
});
//添加公告输入框显示
const addDialogVisible = ref(false);
//添加公告
const addForm = reactive({
  noticeTitle: "",
  noticeContent: "",
  bookAdminId: 1,
});
let noticeId = ref("");
//添加公告规则
const addFormRules = reactive({
  noticeTitle: [
    { required: true, message: "请输入公告标题", trigger: "blur" },
    {
      min: 6,
      max: 30,
      message: "长度在6到30个字符",
      trigger: "blur",
    },
  ],
  noticeContent: [{ required: true, message: "请输入公告内容", trigger: "blur" }],
});
//翻页信息
const queryInfo = reactive({
  pageNum: 1,
  pageSize: 5,
});
let total = ref(0);
let loading = ref(true);

onMounted(() => {
  getNoticeList();
});

const handleSizeChange = val => {
  queryInfo.pageSize = val;
  getNoticeList();
};
const handleCurrentChange = val => {
  queryInfo.pageNum = val;
  getNoticeList();
};

//获取指定公告
const showEditDialog = id => {
  loading.value = false;
  console.log(id);
  getOneNotice(id)
    .then(res => {
      editForm.noticeId = res.data.data.noticeId;
      editForm.noticeTitle = res.data.data.noticeTitle;
      editForm.noticeContent = res.data.data.noticeContent;
      console.log(res.data, "111");
      ElMessage({
        message: "获取公告成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取公告失败");
    });

  // 让修改公告的对话框可见
  editDialogVisible.value = true;
};
//监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
const editDialogClosed = () => {
  // $refs.editFormRef.resetFields();
};
// 根据公告id修改公告
const editNoticeById = () => {
  alterNotice(editForm)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "修改公告成功",
        type: "success",
      });
    })
    .then(res => getNoticeList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("修改公告失败");
    });
  // 对话框不可见
  editDialogVisible.value = false;
};
//删除公告
const removeUserById = id => {
  //如果用户确认删除，则返回值为字符串confirm
  //如果用户取消删除，则返回值为字符串cancel
  let data = {
    noticeId: id,
  };
  removeNotice(data)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "删除公告成功",
        type: "success",
      });
    })
    .then(res => getNoticeList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("删除公告失败");
    });
};
//监听添加公告对话框的关闭，一旦对话框关闭，就重置表单
const addDialogClosed = () => {
  // $refs.addFormRef.resetFields();
};
//当用户点击发送新公告时，让添加对话框的visible改为true
const showAddDialog = () => {
  addDialogVisible.value = true;
  console.log(addDialogVisible.value);
};

//获取公告信息
const getNoticeList = () => {
  getNotice(queryInfo)
    .then(res => {
      tableData.value = res.data.data.records;
      total.value = res.data.data.total;
      console.log(tableData.value, "111");
      ElMessage({
        message: "获取公告信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取公告信息失败");
    });
  loading.value = false;
};

//添加新公告
const addNotice = () => {
  //   // 取消可见性
  addDialogVisible.value = false;
  //   // 获取图书管理员id
  addNotices(addForm)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "添加公告成功",
        type: "success",
      });
    })
    .then(res => getNoticeList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("添加公告失败");
    });
};
</script>

<style></style>
